<#assign ctx=springMacroRequestContext.contextPath />
<#include "/macro/publicMacro.ftl">
<#import "/macro/pagination.ftl" as Pagination>

<@header title="Big列表">
</@header>

<@body>
    <h2 class="module-title">bigList管理</h2>

    <nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#list_0">list_0</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#list_300">list_300</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#list_821">list_821</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#list_999">list_999</a>
            </li>
        </ul>
    </nav>

    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
        <#list bigListDatas as data>
            <div class="card" id="list_${data.id}">
                <img src="${ctx}/resource/webrtc-img/audio.svg" class="card-img-top" alt="..." height="100" width="100">
                <div class="card-body">
                    <p style="width: ${data.height}em;" class="text-wrap fs-3">
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                        This is some text within a card body. ${data.data}
                    </p>
                </div>
            </div>
        </#list>
    </div>

</@body>

<@footer>

</@footer>